<!DOCTYPE html>
<head>
    <title>参与投票</title>
    <meta charset="utf-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css" />
	<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
	<style type="text/css">
		img{border: 0;vertical-align: middle;}
		html, body, #wechat-web-container{width: 100%;min-height: 100vh;}
		.bg{background: url(img/bg.png) no-repeat left top;background-size: cover;}
		#wechat-web-container .title{text-align: center;padding: 25px 0 3px;}
		#wechat-web-container .title img{height: 30px;}
		#wechat-web-container .time{text-align: center;font-size: 12px;color: #fff;position: relative;z-index: 99;}
		#wechat-web-container .time span{display: inline-block;background: url(img/time_bg.png) no-repeat center center;background-size: 100% 100%;padding: 6px 10px 10px;}
		#wechat-web-container .con{position: relative;z-index: 9;background: url(img/con_bg.png) no-repeat center center;background-size: 100% 100%;padding: 20px 20px 80px;margin: -15px auto 10px;font-size: 13px;font-weight: bold;width: 278px;line-height: 1.9;text-align: justify;color: #666666;}
		#wechat-web-container .con .con_box{height: 300px;overflow-y: auto;}
		#wechat-web-container .con h5{text-align: center;padding: 60px 0 5px;font-size: 16px;}
		#wechat-web-container .con p.flex{justify-content: space-between;}

		#wechat-web-container .btn{text-align: center;padding-bottom: 20px;}
		#wechat-web-container .btn a{display: block;background: #3e5aa2;color: #fff;margin: 0 30px;padding: 10px;border-radius: 4px;}
		.flex{display: flex;}

		.error{height: 100vh;justify-content: center;align-items: center;text-align: center;}
		.error img{width: 50%;margin-top: -50px;}
		.error p{width: 70%;margin: 0 auto;font-size: 13px;color: #666;}
		.error a{display: inline-block;background-color: #538fe4;border-radius: 4px;margin-top: 20px;font-size: 12px;color: #fff;padding: 5px 30px;}

		.no{height: 100vh;justify-content: center;align-items: center;text-align: center;}
		.no img{width: 50%;margin-top: -50px;}
		.no p{width: 70%;margin: 0 auto;font-size: 13px;color: #666;}
		.no a{display: inline-block;background-color: #538fe4;border-radius: 4px;margin-top: 20px;font-size: 12px;color: #fff;padding: 5px 30px;}
	</style>
</head>中奖
<body>
<div id="wechat-web-container">
	<!-- <div class="flex error">
		<div>
			<img src="img/error.png" >
			<p>当前参加活动人数过多，页面打开速度较慢，建议换个时间进行答题~</p>

			<a href="javascript:;" id="reload">刷新页面</a>
		</div>
	</div> -->
	<!-- <div class="flex no">
		<div>
			<img src="img/no.png" >
			<p>Sorry，您所在区域已超出活动指定范围，暂不能参与此活动...</p>
		</div>
	</div> -->
	<!-- <div class="flex no auth">
		<div>
			<img src="img/no.png" >
			<p>Sorry，尚未获取到您当前地理位置，暂不能参与此活动...</p>

			<a href="javascript:;" id="reauthorization">获取地理位置</a>
		</div>
	</div> -->
	<!-- <div class="title"><img src="img/title.png" ></div>
    <div class="time">
		<span>活动开始时间：2021年8月1日-2021年8月31日</span>
	</div>
	<div class="con">
		<h5>答题说明</h5>
		<div class="con_box">
			<p>一、举办食品安全知识网络答题活动目的是，向全市中小学生和学生家长宣传《食品安全法》、《反食品浪费法》等法律知识和食品安全示范城市创建活动，提升学生和家长们的食品安全意识以及防新冠知识。</p>
			<p>二、有奖答题活动现场兑奖和线下活动体验，时间为7天，奖品如下：</p>
			<p class="flex"><span>1、活动奖品景区景点门票套票</span><span>200张</span></p>
			<p class="flex"><span>2、活动奖品手机3台</span><span>3台</span></p>
			<p class="flex"><span>3、活动实体奖品及服务类奖品</span><span>30000份</span></p>
			<p class="flex"><span>4、餐饮服务企业优惠折扣券</span><span>130000份</span></p>
			<p>三、本次答题活动只对南宁地区中小学生及家长开放。每个学生限答题一次，抽奖一次。</p>
		</div>
	</div>
	<div class="btn">
		<a href="#">马上答题</a>
	</div> -->
</div>
<script type="text/javascript">
var is_wxApi_authorize = false;

var error_str = '<div class="flex error">'+
			'<div>'+
				'<img src="img/error.png" >'+
				'<p>当前参加活动人数过多，页面打开速度较慢，建议换个时间进行答题~</p>'+
				'<a href="javascript:;" id="reload">刷新页面</a>'+
			'</div>'+
		'</div>';

var no_str = '<div class="flex no">'+
				'<div>'+
					'<img src="img/no.png" >'+
					'<p>Sorry，您所在区域已超出活动指定范围，暂不能参与此活动...</p>'+
				'</div>'+
			'</div>';

var no_auth_str = '<div class="flex no auth">'+
					'<div>'+
						'<img src="img/no.png" >'+
						'<p>Sorry，尚未获取到您当前地理位置，暂不能参与此活动...</p>'+
						'<a href="javascript:;" id="reauthorization">获取地理位置</a>'+
					'</div>'+
				'</div>';

var str = '<div class="title"><img src="img/title.png" ></div>'+
			'<div class="time">'+
				'<span>活动开始时间：2021年8月1日-2021年8月31日</span>'+
			'</div>'+
			'<div class="con">'+
				'<h5>答题说明</h5>'+
				'<div class="con_box">'+
					'<p>一、举办食品安全知识网络答题活动目的是，向全市中小学生和学生家长宣传《食品安全法》、《反食品浪费法》等法律知识和食品安全示范城市创建活动，提升学生和家长们的食品安全意识以及防新冠知识。</p>'+
					'<p>二、有奖答题活动现场兑奖和线下活动体验，时间为7天，奖品如下：</p>'+
					'<p class="flex"><span>1、活动奖品手机3台</span><span>3台</span></p>'+
					'<p class="flex"><span>2、活动奖品景区景点门票套票</span><span>200张</span></p>'+
					'<p class="flex"><span>3、活动实体奖品及服务类奖品</span><span>30000份</span></p>'+
					'<p class="flex"><span>4、餐饮服务企业优惠折扣券</span><span>130000份</span></p>'+
					'<p>三、本次答题活动只对南宁地区中小学生及家长开放。每个学生限答题一次，抽奖一次。</p>'+
				'</div>'+
			'</div>'+
			'<div class="btn">'+
				'<a href="https://ks.youkaoshi.cn/doexam/2PgB2dV2gA.html">马上答题</a>'+
			'</div>';
$(document).ready(function() {
	$.ajax({
		url: 'http://newsales.chinaesf.net/yl/wechat/getGpsLocation',
		success: function(res){
			console.log("getJSSdk=", res);
			if (res.code === 1000) {
				var config = res.data;
				wx.config({
					debug: false,
					appId: config.appId,
					timestamp: config.timestamp,
					nonceStr: config.nonceStr,
					signature: config.signature,
					jsApiList: [
						'checkJsApi',
						'openLocation',
						'getLocation'
					]
				});
				wx.ready(function () {
					init();
				});
			} else {
				$("#wechat-web-container").html(error_str);
				$("#reload").on("click", function() {
					location.reload();
				})
			}
		},
		error: function (err) {
			$("#wechat-web-container").html(error_str);
			
			$("#reload").on("click", function() {
				location.reload();
			})
		}
	})
});
// 
function init() {
	wx.checkJsApi({
		jsApiList: [
			'getLocation'
		],
		success: function (res) {
			// alert(JSON.stringify(res));
			// alert(JSON.stringify(res.checkResult.getLocation));
			if (res.checkResult.getLocation == false) {
				alert('你的微信版本太低，不支持微信JS接口，请升级到最新的微信版本！');
				$("#wechat-web-container").html(error_str);
				$("#reload").on("click", function() {
					location.reload();
				})
				return;
			} else {
				// 获取用户当前坐标
				wx.getLocation({
					success: function (res) {
						console.log("getLocation=", res);
						var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
						var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
						var speed = res.speed; // 速度，以米/每秒计
						var accuracy = res.accuracy; // 位置精度
						
						is_wxApi_authorize = true;
						// 根据用户当前坐标逆地址解析详细地址信息
						getLocationMsg(latitude, longitude);
					},
					cancel: function (res) {
						// alert('请先授权获取地理位置才能参与投票！');
						
						$("#wechat-web-container").html(no_auth_str);
						
						$("#reauthorization").on("click", function() {
							init();
						});
					}
				});
			}
		},
		fail: function () {
			// alert("fail");
			$("#wechat-web-container").html(error_str);
			$("#reload").on("click", function() {
				location.reload();
			})
		}
	});
}

// 获取用户详细地址信息
function getLocationMsg(lat, lng) {
	$.ajax({
		url: 'https://apis.map.qq.com/ws/geocoder/v1/',
		method:'get',
		data: {
			location: lat+','+lng,
			key: '7OBBZ-EQLK4-GO3U2-D34KX-EBCCS-XLBMB',
			output: 'jsonp'
		},
		dataType: 'jsonp',
		async: false,
		success: function(res){
			console.log("getLocationMsg=", res);
			var message = res.message;
			if (message.indexOf('ok') >= 0) {
				var result = res.result;
				if (result.address_component.city == '南宁市') {//南宁市
					$("#wechat-web-container").addClass('bg');
					$("#wechat-web-container").html(str);
				} else{// 非南宁市
					$("#wechat-web-container").html(no_str);
				}
			} else {
				$("#wechat-web-container").html(error_str);
				$("#reload").on("click", function() {
					location.reload();
				})
			}
		},
		error:function(err){
			console.log("getLocationMsg_err=", err);
			$("#wechat-web-container").html(error_str);
			$("#reload").on("click", function() {
				location.reload();
			})
		}					
	});
}
</script>
</body>
</html>